<template>
  <a-drawer
    :width="500"
    :headerStyle="state.headerStyle"
    :bodyStyle="state.bodyStyle"
    placement="right"
    :closable="true"
    :visible="state.visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <template v-slot:title>
      <img :src="ccIcon" class="anticon" />
      <span class="flow-ant-drawer-title">
        <EditName v-model="node.name" />
      </span>
    </template>
    <div class="flow-setting-module">
      <div class="flow-setting-content">
        <div class="flow-setting-item">
          <p class="flow-setting-item-title">表单权限</p>
          <AuthForm v-model="node.privileges" readable />
        </div>
      </div>
    </div>
    <FlowDrawerFooter @close="onClose" @save="onSave" />
  </a-drawer>
</template>
<script lang="ts" setup name="WriteNode">
  import FlowDrawerFooter from '../../common/DrawerFooter.vue';
  import EditName from '../../common/EditName.vue';
  import AuthForm from '../../common/AuthForm.vue';
  // 定义子组件向父组件传值/事件
  const emit = defineEmits(['close']);
  const state=reactive({node: {},
        visible: false,
         bodyStyle: {
      height: 'calc(100vh - 114px)',
      'overflow-y': 'auto',
    },
        headerStyle: {
          background: 'linear-gradient(90.04deg,#268bfb -16.37%,#33e1ae 137.34%)',
          // 'background-color': '#6da4f2',
          'border-radius': '0px 0px 0 0',
        }});
        
function afterVisibleChange(val) {
        console.log('visible', val);
      }
function showDrawer(node) {
        state.visible = true;
        state.node = node;
      }
function onClose() {
        state.visible = false;
        emit('close');
      }
      /**
       * 保存配置
       */
function onSave() {
        // 更新节点显示信息
        if (this.node.privileges.length > 0) {
          this.$store.dispatch('flow/updateNode', { currNode: this.node, field: 'content', value: '已设置' });
          this.$store.dispatch('flow/updateNode', { currNode: this.node, field: 'error', value: false });
          this.onClose();
        } else {
          this.$store.dispatch('flow/updateNode', { currNode: this.node, field: 'content', value: null });
          this.$store.dispatch('flow/updateNode', { currNode: this.node, field: 'error', value: false });
        }
      }
  defineExpose({ showDrawer });
</script>
